@import "../../styles/App.scss";

.city_select {
  .city_select_content {
    height: calc(100vh - 45px);
    background-color: #fff;
    border-top: 1px solid #ccc;
    overflow: hidden;
    position: relative;
    .city_main {
      color: #333;
      font-size: 16 * $rate2;
      .title {
        height: 40 * $rate2;
        display: flex;
        align-items: center;
        padding-left: 15 * $rate2;
        color: #999;
        font-size: 14 * $rate2;
      }
      .cityname {
        height: 50 * $rate2;
        display: flex;
        align-items: center;
        padding-left: 15 * $rate2;
        border-bottom: 1 * $rate2 solid #eee;
      }
    }
    // 城市列表渲染完成
    // 字母列表开始
    .letter_view {
      position: absolute;
      right: 10 * $rate2;
      top: 5 * $rate2;
      height: calc(100% - 5px);
      display: flex;
      flex-direction: column;
      .letter_item {
        flex: 1;
        span {
          width: 18 * $rate2;
          height: 18 * $rate2;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12 * $rate2;
        }
        &.active {
          span {
            background-color: #66ccff;
            color: #fff;
          }
        }
      }
    }
    // 字母列表结束
  }
}
